<template>
	<div id="scan">
		<nav-tab activeColor="#0D0A12">
			<header-item>
				<div class="header-nav1" slot="header-img" @click="fanhui">
					<van-icon name="arrow-left" size="25px" color="#FFFFFF" />
				</div>
				<div class="header-nav2" slot="header-sc">
					<div style="font-size: 17px;color: black;">消息</div>
				</div>
				<div class="header-nav3" slot="header-xingx">
					<van-icon name="browsing-history-o" color="#FFFFFF" size="22px" style="margin-right: 30px;" />
					<van-icon name="info-o" color="#FFFFFF" size="22px" />

				</div>
			</header-item>
		</nav-tab>
		<div class="saoyisao">
			<div class="yuan">
				<img src="../../assets/image/scan/ma.png">
			</div>
			<div class="footer-tis">放入框内，自动扫描</div>
		</div>
		
			<mainvr-bar></mainvr-bar>
	</div>
</template>

<script>
	import NavTab from '@/components/navtar/Header.vue'
	import HeaderItem from '@/components/navtar/HeaderItem.vue'
	import MainvrBar from '@/components/vrtab/MainvrBar.vue'
	import {
		Icon,
		Cell,
		CellGroup,
		Button
	} from 'vant';
	export default {
		methods: {
			fanhui() {
				this.$router.go(-1)
			}
		},
		components: {
			NavTab,
			HeaderItem,
			[Icon.name]: Icon,
			MainvrBar
		}
	}
</script>

<style lang="less" scoped>
	#scan {
		width: 100vw;
		height: 100%;
		position: fixed;
		background-color: #0D0A12;
	}

	.saoyisao {
		margin-top: 45px;
		height: 375px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.yuan {
			height: 375px;
			display: flex;
			align-items: center;
			justify-content: center;

		  img{
			  width: 100%;
			  height: 100%;
		  }
		}

		.footer-tis {
			font-size: 17px;
			color: #969CA5;
			margin-top: 20px;
		}
	}

	// .dibuBox {
	// 	height: 71px;
	// 	margin-top: 150px;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;
 //        padding: 0 20px;
	// 	box-sizing: border-box;
	// 	.dibuBox-item {
	// 		width: 45px;
	// 		height: 71px;
	// 		font-size: 14px;
	// 		color: #CDD3DB;
	//        text-align: center;
	// 		img {
	// 			width: 45px;
	// 			height: 44px;
	// 			vertical-align: middle;
	// 		}
	// 	}

	// }
	// .tagkode{
	// 	 position: absolute;
	// 	 margin-top: 125px;
	// 	 left: 50%;
	// 	 margin-left: -35px;
	// }
	// .tagkode-no{
	// 	 width: 80px;
	// 	 height: 23px;
	// 	 background-color:#F99A58 ;
	// 	 border-radius: 15px;
	// 	 font-size: 12px;
	// 	 color: #FFFFFF;
	// 	 display: flex;
	// 	 align-items: center;
	// 	 justify-content: center;
		
	// }
	
</style>
